import React from 'react';
import { Button, Space } from 'antd';
import { ModalForm, ProFormText, ProFormDatePicker, ProFormDigit } from '@ant-design/pro-form';
import ProCard from '@ant-design/pro-card';
import { connect } from 'umi';
import styles from '@/pages/trade/Item/index.less';

const OperationCard = (props) => {
  const { dispatch, currentUser, item } = props;

  const onSaleFinish = (values) => {
    dispatch({
      type: 'item/addTrade',
      payload: {
        ...values,
        itemID: item.id,
        userID: currentUser.id,
        fromUserID: currentUser.id,
        toUserID: currentUser.id,
        type: 2,
      },
    });
    return true;
  };

  const onBidFinish = (values) => {
    dispatch({
      type: 'item/addTrade',
      payload: {
        ...values,
        itemID: item.id,
        userID: currentUser.id,
        fromUserID: currentUser.id,
        toUserID: currentUser.id,
        type: 6,
      },
    });
    return true;
  };

  const onAuthFinish = (values) => {
    dispatch({
      type: 'item/addTrade',
      payload: {
        ...values,
        itemID: item.id,
        userID: currentUser.id,
        fromUserID: currentUser.id,
        toUserID: currentUser.id,
        type: 4,
      },
    });
    return true;
  };

  const fixPriceForm = (
    <ModalForm
      title="设置价格"
      trigger={<Button type="primary">定价出售</Button>}
      onFinish={onSaleFinish}
    >
      <ProFormText
        name="price"
        label="定价"
        placeholder="金额"
        rules={[
          {
            required: true,
            message: '请输入定价',
          },
        ]}
      />
      {/*<ProFormDatePicker*/}
      {/*  name='endTime'*/}
      {/*  label={'截止时间'}*/}
      {/*  placeholder={'截止时间'}*/}
      {/*/>*/}
      {/*<ProFormText*/}
      {/*  name='toAccount'*/}
      {/*  label={'指定用户'}*/}
      {/*  placeholder={'用户账户'}*/}
      {/*/>*/}
    </ModalForm>
  );

  const bidForm = (
    <ModalForm
      title="设置价格"
      trigger={<Button type="primary">拍卖出售</Button>}
      onFinish={onBidFinish}
    >
      <ProFormText
        name="price"
        label="起拍价"
        placeholder="金额"
        rules={[
          {
            required: true,
            message: '请输入定价',
          },
        ]}
      />
      {/*<ProFormDigit*/}
      {/*  name='reservePrice'*/}
      {/*  label={'保留价格'}*/}
      {/*  placeholder={'金额'}*/}
      {/*  rules={[*/}
      {/*    {*/}
      {/*      required: true,*/}
      {/*      message: '请输入定价',*/}
      {/*    },*/}
      {/*  ]}*/}
      {/*/>*/}
      {/*<ProFormDatePicker*/}
      {/*  name='endTime'*/}
      {/*  label={'截止时间'}*/}
      {/*  placeholder={'截止时间'}*/}
      {/*/>*/}
    </ModalForm>
  );

  const authForm = (
    <ModalForm
      title="设置价格"
      trigger={<Button type="primary">授权设置</Button>}
      onFinish={onAuthFinish}
    >
      <ProFormText
        name="price"
        label="定价"
        placeholder="金额"
        rules={[
          {
            required: true,
            message: '请输入定价',
          },
        ]}
      />
      <ProFormDigit label="授权个数" name="count" min={1} max={10} />
    </ModalForm>
  );

  const operationCard = (
    <ProCard className={styles.itemCard} headerBordered title="操作">
      <Space>
        {fixPriceForm}
        {bidForm}
        {authForm}
      </Space>
    </ProCard>
  );
  return item.status === 1 && currentUser.id === item.owner.id && operationCard;
};

export default connect(({ item, user }) => ({
  currentUser: user.currentUser,
  item: item.item,
}))(OperationCard);
